import React, { useState, useEffect } from 'react'
import { Table, Switch, Button, message, Drawer, Modal } from 'antd';
import { getCates, deleteCate, changeCateDetail } from '@/api/cate';
import SearchBar from '@/components/SearchBar';
import './cateLists.scss'
import CateAdd from './components/CateAdd';
import { useNavigate } from 'react-router-dom';
import CateUpdate from './components/CateUpdate';


export default function CateLists() {

    const navigate = useNavigate()
    // 搜索字段
    let serarchParams = {
        key: '',
        start: '',
        end: ''
    }

    // 商品列表数据
    let [cates, setCates] = useState([])
    // 定义方法获取 商品列表数据, 修改数据
    const fetchCates = () => {
        getCates({
            ...serarchParams
        }).then(res => {
            if (res.data.code === 200) {
                setCates(cates = res.data.data)
                // console.log(cates);
            }
        })
    }

    // table组件, 定义表头和渲染内容
    const columns = [
        {
            title: '分类名',
            dataIndex: 'cateName',
            key: 'cateName',
        },
        {
            title: '分类图标',
            dataIndex: 'cateIcon',
            key: 'cateIcon',
            render: (icon: string) => {
                return <img src={icon} width={50} alt="" />
            }
        },
        {
            title: '是否启用',
            dataIndex: 'enable',
            key: 'enable',
            render: (enable: boolean, row: any) => {
                return (
                    <Switch
                        // checked={enable}
                        checkedChildren="启用"
                        unCheckedChildren="禁用"
                        onChange={
                            (enable) => {
                                switchCateEnable(row.id, enable)
                            }
                        } />
                )
            }
        },
        {
            title: '商品描述',
            dataIndex: 'desc',
            key: 'desc'
        },
        {
            title: '操作',
            key: 'actions',
            // 有下列代码 传入的row.id，id报错undefined 因为mock接口无actions字段
            // dataIndex: 'actions',
            render: (row: any) => {
                return (
                    <>
                        <Button type='primary' onClick={
                            () => {
                                changeUpdateCate(row)
                            }
                        }>编辑</Button>
                        <Button
                            danger
                            type='primary'
                            onClick={
                                () => {
                                    delCate(row.id)
                                }
                            }
                        >
                            删除
                        </Button>
                    </>
                )
            }
        }
    ];

    // 编辑修改商品分类
    // 传入分类id
    const [cateId, setCateId] = useState(-1)
    // 编辑弹窗 显示隐藏
    const [changeUpdateShow, setChangeUpdateShow] = useState(false)
    const changeUpdateCate = (id: number) => {
        setCateId(id)
        setChangeUpdateShow(true)
    }

    // 删除商品分类
    const delCate = (id: number) => {
        setCateId(id);
        console.log(id);

        Modal.confirm({
            title: '删除',
            content: '确定要删除吗？',
            onOk: () => {
                deleteCate().then(res => {
                    if (res.data.code === 200) {
                        message.success(res.data.msg, 2, () => {
                            // navigate(0)
                        })
                    }
                })
            }
        })
    }

    // 修改 是否启用 enable分类状态
    const switchCateEnable = (id: number, enable: boolean) => {
        // console.log(id, enable);
        changeCateDetail({
            cateId: id,
            enable: enable
        }).then(res => {
            if (res.data.code === 200) {
                message.success(res.data.msg, 1, () => {
                    navigate(0)
                })
            }
        })
    }

    // 点击搜索
    const onSearch = (params: { key: string, start: string, end: string }) => {
        serarchParams = params
        // fetchCates()
        // 搜索成功 全局消息提示
        message.success("搜索成功", 2, () => {
            navigate(0)
        })
    }

    // 商品弹窗 新增
    const [cateAddShow, setCateAddShow] = useState(false)

    // 定义方法获取 商品列表数据 后, 渲染数据到table
    useEffect(() => {
        fetchCates()
    }, [])


    return (
        <div>
            <>

                {/* SearchBar搜索组件 */}
                <SearchBar onSearch={onSearch} />
            </>

            {/* 增加商品分类的弹窗按钮 */}
            <Button type='primary' id='antBtnAddCate' onClick={
                () => {
                    setCateAddShow(true)
                }
            } >
                新增商品分类
            </Button>
            {/* 增加商品分类 弹窗出现 */}
            <Drawer
                title="新增商品分类"
                placement="right"
                closable={true}
                onClose={
                    () => {
                        setCateAddShow(false)
                    }
                }
                open={cateAddShow}
                key="addCate"
            >
                <CateAdd cates={cates} />
            </Drawer>

            {/* 商品分类列表渲染 */}
            <Table
                columns={columns}
                dataSource={cates}
                rowKey='id'
            // 分页
            // pagination={false}
            />

            {/* 修改商品分类弹窗 */}
            <Drawer
                title="编辑修改商品分类"
                open={changeUpdateShow}
                closable={true}
                key='updateCate'
                onClose={() => {
                    setChangeUpdateShow(false)
                }}
            >
                <CateUpdate cates={cates} cateId={cateId} />
            </Drawer>
        </div>
    )
}
